<template>
  <span class="version" :class="version"></span>
</template>

<script>
export default {
  props: {
    ver: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      
    }
  },

  computed: {
    version() {
      let arr = []
      let reg1 = new RegExp('(3D|2D)', 'gi')
      let reg2 = new RegExp('(中国巨幕)', 'gi')
      let r1 = reg1.exec(this.ver)
      let r2 = reg2.exec(this.ver)
      if (r1) {
        arr.push('v' + r1[0].toLowerCase())
      }
      if (r2) {
        arr.push('imax')
      }
      
      return arr.join(' ')
    }
  }
}
</script>

<style lang='stylus' scoped>
.pre-show,
.version {
  background-size: contain;
  background-repeat: no-repeat;
  height: 14px;
  width: 17px;
  display: inline-block;
  margin-top: 2px;
  margin-left: 6px;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  margin-right: 3px
}

.pre-show {
  width: 23px;
  background-image: url('')
}

.version.v2d.imax {
  width: 43px;
  background-image: url('')
}

.version.v2d.imax+div.title {
  max-width: calc(100% - 43px)
}

.version.v3d {
  background-image: url('')
}

.version.v3d.imax {
  width: 43px;
  background-image: url('')
}

.version.v3d.imax+div.title {
  max-width: calc(100% - 43px)
}
</style>